<template>
  <div class="space-y-6">
    <!-- 搜索和操作区域 -->
    <div class="flex justify-between">
      <div class="flex gap-4">
        <a-input-search
          v-model="searchParams.code"
          placeholder="请输入维修单号"
          style="width: 200px"
          @search="handleSearch"
        />
        <a-select
          v-model="searchParams.status"
          placeholder="维修状态"
          style="width: 160px"
          @change="handleSearch"
        >
          <a-option value="">全部状态</a-option>
          <a-option :value="0">待维修</a-option>
          <a-option :value="1">维修中</a-option>
          <a-option :value="2">已完成</a-option>
        </a-select>
        <a-select
          v-model="searchParams.priority"
          placeholder="优先级"
          style="width: 160px"
          @change="handleSearch"
        >
          <a-option value="">全部优先级</a-option>
          <a-option :value="0">低</a-option>
          <a-option :value="1">中</a-option>
          <a-option :value="2">高</a-option>
        </a-select>
        <a-select
          v-model="searchParams.equipmentId"
          placeholder="请选择设备"
          style="width: 200px"
          @change="handleSearch"
        >
          <a-option value="">全部设备</a-option>
          <a-option v-for="item in equipmentOptions" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-option>
        </a-select>
      </div>
      <a-button type="primary" @click="createOrder">
        <template #icon><icon-plus /></template>
        新建维修单
      </a-button>
    </div>

    <!-- 维修订单列表 -->
    <a-table
      :data="tableData"
      :loading="loading"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      stripe
    >
      <template #columns>
        <a-table-column title="维修单号" data-index="code" />
        <a-table-column title="设备名称" data-index="equipmentName" />
        <a-table-column title="故障描述" data-index="faultDescription" />
        <a-table-column title="报修人" data-index="reportUserName" />
        <a-table-column title="维修人" data-index="repairUserName" />
        <a-table-column title="优先级" data-index="priority">
          <template #cell="{ record }">
            <a-tag :color="getPriorityColor(record.priority)">
              {{ getPriorityLabel(record.priority) }}
            </a-tag>
          </template>
        </a-table-column>
        <a-table-column title="维修状态" data-index="status">
          <template #cell="{ record }">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusLabel(record.status) }}
            </a-tag>
          </template>
        </a-table-column>
        <a-table-column title="开始时间" data-index="startTime" />
        <a-table-column title="完成时间" data-index="finishTime">
          <template #cell="{ record }">
            {{ record.finishTime || '-' }}
          </template>
        </a-table-column>
        <a-table-column title="操作" :width="operationColumnWidth" fixed="right">
          <template #cell="{ record }">
            <a-space>
              <a-button 
                v-if="record.status === 0"
                type="text" 
                size="small"
                status="success"
                :loading="record.assigning"
                @click="openAssignModal(record)"
              >
                <template #icon><icon-user-add /></template>
                分配
              </a-button>
              <a-popconfirm
                v-if="record.status === 1"
                content="确认维修已完成？"
                @ok="handleUpdateProgress(record)"
              >
                <a-button 
                  type="text" 
                  size="small"
                  status="warning"
                  :loading="record.updating"
                >
                  <template #icon><icon-check-circle /></template>
                  完成维修
                </a-button>
              </a-popconfirm>
              <a-button type="text" size="small" @click="viewDetail(record)">
                <template #icon><icon-eye /></template>
                详情
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <!-- 添加分配维修工弹窗 -->
    <a-modal
      v-model:visible="assignModalVisible"
      title="分配维修工"
      @ok="handleAssign"
      @cancel="cancelAssign"
      :ok-loading="assignLoading"
    >
      <a-form :model="assignForm" ref="assignFormRef">
        <a-form-item field="repairUserId" label="维修工" :rules="[{ required: true, message: '请选择维修工' }]">
          <a-select
            v-model="assignForm.repairUserId"
            placeholder="请选择维修工"
          >
            <a-option 
              v-for="worker in repairWorkers" 
              :key="worker.id" 
              :value="worker.id"
            >
              {{ worker.name }}
            </a-option>
          </a-select>
        </a-form-item>
        <div class="mt-2 text-gray-600">
          分配后订单状态将变更为"维修中"
        </div>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { 
  IconPlus, 
  IconEye, 
  IconUserAdd,
  IconCheckCircle 
} from '@arco-design/web-vue/es/icon'
import type { FormInstance } from '@arco-design/web-vue'
import type { RepairOrder, RepairOrderQuery, RepairOrderProgressDTO, ExtendedRepairOrder } from '@/types/repair'
import { getRepairOrderList, assignRepairUser, updateProgress, getRepairUserList } from '@/services/repair'

// 搜索参数
const searchParams = reactive({
  code: '',
  status: undefined as number | undefined,
  priority: undefined as number | undefined,
  equipmentId: undefined as number | undefined
})

// 表格相关
const loading = ref(false)
const tableData = ref<ExtendedRepairOrder[]>([])
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
  pageSizeOptions: [10, 20, 50, 100]
})

// 操作列宽度
const operationColumnWidth = 320

// 设备选项（模拟数据）
const equipmentOptions = ref([
  { id: 1, name: '数控机床A' },
  { id: 2, name: '数控机床B' },
  { id: 3, name: '车床C' }
])

// 状态工具函数
const getStatusLabel = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '待维修',
    1: '维修中',
    2: '已完成'
  }
  return statusMap[status] || '未知状态'
}

const getStatusColor = (status: number) => {
  const colorMap: Record<number, string> = {
    0: 'orange',
    1: 'blue',
    2: 'green'
  }
  return colorMap[status] || 'default'
}

// 优先级工具函数
const getPriorityLabel = (priority: number) => {
  const priorityMap: Record<number, string> = {
    0: '低',
    1: '中',
    2: '高'
  }
  return priorityMap[priority] || '未知'
}

const getPriorityColor = (priority: number) => {
  const colorMap: Record<number, string> = {
    0: 'blue',
    1: 'orange',
    2: 'red'
  }
  return colorMap[priority] || 'default'
}

// 获取维修订单列表
const fetchMaintenanceList = async () => {
  loading.value = true
  try {
    const params: RepairOrderQuery = {
      page: pagination.current,
      size: pagination.pageSize,
      code: searchParams.code || undefined,
      status: searchParams.status,
      priority: searchParams.priority,
      equipmentId: searchParams.equipmentId
    }

    const res = await getRepairOrderList(params)
    console.log('获取维修订单列表响应:', res)
    
    const { data: response } = res
    if (response.code === 1) {
      tableData.value = response.data.records.map(record => ({
        ...record,
        updating: false,
        assigning: false
      })) as ExtendedRepairOrder[]
      pagination.total = response.data.total
    } else {
      Message.error(response.msg || '获取列表失败')
    }
  } catch (error) {
    console.error('获取维修订单列表失败:', error)
    Message.error('获取维修订单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchMaintenanceList()
}

// 分页
const onPageChange = (page: number) => {
  pagination.current = page
  fetchMaintenanceList()
}

const onPageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize
  fetchMaintenanceList()
}

// 新建维修单
const createOrder = () => {
  Message.info('新建维修单功能开发中...')
}

// 查看详情
const viewDetail = (record: any) => {
  Message.info(`查看维修单 ${record.code} 的详细信息`)
}

// 分配相关
const assignModalVisible = ref(false)
const assignLoading = ref(false)
const currentOrder = ref<ExtendedRepairOrder | null>(null)
const assignFormRef = ref<FormInstance>()
const assignForm = reactive({
  repairUserId: undefined as number | undefined,
  remarks: ''
})

// 维修工列表
const repairWorkers = ref<{ id: number; name: string }[]>([])

// 获取维修工列表
const fetchRepairWorkers = async () => {
  try {
    const res = await getRepairUserList()
    console.log('获取维修工列表响应:', res)
    
    const { data: response } = res
    if (response.code === 1) {
      repairWorkers.value = response.data
    } else {
      Message.error(response.msg || '获取维修工列表失败')
    }
  } catch (error) {
    console.error('获取维修工列表失败:', error)
    Message.error('获取维修工列表失败')
  }
}

// 打开分配弹窗
const openAssignModal = (record: ExtendedRepairOrder) => {
  currentOrder.value = record
  assignModalVisible.value = true
  assignForm.repairUserId = undefined
  assignForm.remarks = ''
}

// 取消分配
const cancelAssign = () => {
  assignModalVisible.value = false
  assignFormRef.value?.resetFields()
}

// 确认分配
const handleAssign = async () => {
  if (!currentOrder.value || !assignForm.repairUserId) {
    Message.error('请选择维修工')
    return
  }
  
  try {
    await assignFormRef.value?.validate()
    assignLoading.value = true
    
    const res = await assignRepairUser(currentOrder.value.orderId, {
      repairUserId: assignForm.repairUserId,
      remarks: assignForm.remarks
    })
    
    console.log('分配维修工响应:', res)
    const { data: response } = res
    
    if (response.code === 1) {
      Message.success('分配成功')
      assignModalVisible.value = false
      await fetchMaintenanceList()
    } else {
      Message.error(response.msg || '分配失败')
    }
  } catch (error) {
    console.error('分配维修工失败:', error)
    Message.error('分配失败')
  } finally {
    assignLoading.value = false
  }
}

// 更新维修进度
const handleUpdateProgress = async (record: ExtendedRepairOrder) => {
  try {
    record.updating = true
    
    const progressData: RepairOrderProgressDTO = {
      repairSolution: record.repairSolution || '',
      repairMaterials: record.repairMaterials || '',
      repairFee: record.repairFee || 0,
      qualityCheckResult: record.qualityCheckResult || 0,
      status: 2
    }
    
    const res = await updateProgress(record.orderId, progressData)
    console.log('更新维修进度响应:', res)
    
    const { data: response } = res
    if (response.code === 1) {
      Message.success('维修完成')
      await fetchMaintenanceList()
    } else {
      Message.error(response.msg || '更新失败')
    }
  } catch (error) {
    console.error('更新维修进度失败:', error)
    Message.error('更新维修进度失败')
  } finally {
    record.updating = false
  }
}

// 页面加载时获取数据
onMounted(async () => {
  await Promise.all([
    fetchMaintenanceList(),
    fetchRepairWorkers()
  ])
})
</script>

<style scoped>
.arco-tag {
  padding: 4px 8px;
  font-size: 14px;
}

.arco-btn-text {
  padding: 4px 8px;
}

.arco-space {
  gap: 8px;
}

/* 添加一些新的样式 */
.arco-btn-text.arco-btn-status-warning {
  color: var(--warning-6);
}

.arco-btn-text.arco-btn-status-warning:hover {
  color: var(--warning-5);
}
</style> 